<template>
  <view class="article-page">
    <!-- nav -->
    <tui-navigation-bar :isOpacity="false" color="#333" class="nav">
      <view class="nav-content">
        <view class="left">
          <tui-icon
            name="arrowleft"
            color="#333"
            size="30"
            unit="px"
            @click="back"
          />
          <view class="author" :class="showAuthor ? 'author-show' : ''">
            <view class="avatar">
              <image src="/static/icon/avatar-default.png" class="avatar-img" />
            </view>
            <view class="name">{{ author }}</view>
            <tui-loadmore
              v-show="followLoading"
              fontSize="8px"
              :index="2"
              :showText="false"
              style="margin-left: 6px"
            ></tui-loadmore>
            <view
              v-show="!followLoading"
              @click="follow"
              :class="isFollowed ? 'followed' : 'follow'"
              >{{ isFollowed ? "已关注" : "关注" }}</view
            >
          </view>
        </view>
        <view class="right">
          <tui-icon
            name="search"
            color="#333"
            size="25"
            unit="px"
            class="r"
            @click="toSearch"
          />
          <tui-icon
            name="more-fill"
            color="#333"
            size="23"
            unit="px"
            class="r2"
            @click="more"
          />
        </view>
      </view>
    </tui-navigation-bar>
    <!-- content -->
    <view class="content">
      <view class="article-header">
        <view class="title">第二十四届冬季奥林匹克运动会在北京隆重开幕</view>
        <view class="author">
          <view class="left">
            <view class="avatar">
              <image src="/static/icon/avatar-default.png" class="avatar-img" />
            </view>
            <view class="info">
              <view class="name">{{ author }}</view>
              <view class="desc">{{ time }}·XBoot官方账号</view>
            </view>
          </view>
          <tui-button
            @click="follow"
            :size="14"
            width="80px"
            height="28px"
            shape="circle"
            :type="isFollowed ? 'white' : 'danger'"
            ><tui-loadmore
              v-show="followLoading"
              fontSize="8px"
              :index="3"
              :showText="false"
            ></tui-loadmore
            ><view v-show="!followLoading && !isFollowed"
              ><tui-icon
                name="plus"
                :size="14"
                unit="px"
                color="#fff"
                style="margin-right: 3px"
              ></tui-icon
              >关注</view
            ><view v-show="!followLoading && isFollowed"
              >已关注</view
            ></tui-button
          >
        </view>
      </view>
      <view class="article-content">
        <mp-html :content="html" class="html" />
      </view>
      <view class="comment-content">
        <view class="title">
          <view class="left">评论 18</view>
          <view class="right">168 赞 <tui-divider vertical /> 3 转发</view>
        </view>
        <view
          class="comment-item"
          v-for="(item, index) in comments"
          :key="index"
        >
          <view class="left">
            <image :src="item.avatar" class="avatar" />
          </view>
          <view class="right">
            <view class="top">
              <view class="head">
                <view class="l">{{ item.username }}</view>
                <view
                  class="r"
                  @click="likeComment(item)"
                  :style="{ color: item.isLiked ? '#ed4014' : '#444' }"
                  >{{ item.like
                  }}<tui-icon
                    :name="item.isLiked ? 'agree-fill' : 'agree'"
                    :size="18"
                    :color="item.isLiked ? '#ed4014' : '#444'"
                    class="icon"
                /></view>
              </view>
              <view class="desc" v-if="item.desc">{{ item.desc }}</view>
            </view>
            <view class="center" @click="replyComment(item)">{{
              item.content
            }}</view>
            <view class="bottom">
              <view
                class="reply"
                hover-class="opcity"
                :hover-stay-time="150"
                @click="replyComment(item)"
                >{{ item.replyCount > 0 ? item.replyCount + " " : "" }}回复
                <tui-icon name="arrowright" :size="14" color="#222"></tui-icon
              ></view>
              <view class="time">{{ item.time }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="operation-bar">
      <view
        class="comment"
        hover-class="opcity"
        :hover-stay-time="100"
        @click="comment"
        ><view class="iconfont icon-edit" /><view class="write"
          >写评论...</view
        ></view
      >
      <view class="right-btns">
        <view
          class="operation-item"
          hover-class="opcity"
          :hover-stay-time="100"
          @click="toComment"
        >
          <tui-icon name="message" :size="29" color="#444"></tui-icon>
          <tui-badge
            absolute
            type="danger"
            :scaleRatio="0.7"
            translateX="5px"
            top="6px"
            >501</tui-badge
          >
        </view>
        <view
          class="operation-item"
          hover-class="opcity"
          :hover-stay-time="100"
          @click="collect"
        >
          <tui-icon
            :name="isCollected ? 'star-fill' : 'star'"
            :size="25"
            :color="isCollected ? '#ffd214' : '#444'"
          ></tui-icon>
        </view>
        <view
          class="operation-item"
          hover-class="opcity"
          :hover-stay-time="100"
          @click="like"
        >
          <tui-icon
            :name="isLiked ? 'agree-fill' : 'agree'"
            :size="24"
            :color="isLiked ? '#ed4014' : '#444'"
          ></tui-icon>
        </view>
        <view
          class="operation-item"
          hover-class="opcity"
          :hover-stay-time="100"
          @click="share"
        >
          <tui-icon name="share" :size="28" color="#444"></tui-icon>
        </view>
      </view>
    </view>

    <tui-bottom-popup
      :radius="false"
      backgroundColor="#fff"
      :show="commentShow"
      @close="commentShow = false"
    >
      <view class="edit-content">
        <view class="input-content">
          <tui-textarea
            v-model="commentContent"
            :placeholder="replyPlaceholder"
            :focus="commentShow"
            color="#222"
            backgroundColor="#f2f2f4"
            isCounter
            :maxlength="100"
            :size="14"
            height="40px"
            minHeight="40px"
            borderRadius="8px"
            :wrapLine="false"
            class="input"
          ></tui-textarea>
          <view class="btn">
            <tui-button
              :type="commentContent ? 'danger' : 'gray'"
              :size="14"
              width="56px"
              height="30px"
              shape="circle"
              :disabled="!commentContent"
              @click="send"
              >发送
            </tui-button>
          </view>
        </view>
        <view class="btns">
          <view
            class="item"
            hover-class="opcity"
            :hover-stay-time="150"
            @click="choosePic"
          >
            <tui-icon name="pic" :size="24" color="#444"></tui-icon>
          </view>
          <view class="item" hover-class="opcity" :hover-stay-time="150">
            <view class="iconfont icon-huatifuhao"></view>
          </view>
          <view class="item" hover-class="opcity" :hover-stay-time="150">
            <tui-icon name="satisfied" :size="23" color="#444"></tui-icon>
          </view>
        </view>
      </view>
    </tui-bottom-popup>

    <tui-actionsheet isCustom :show="actionShow" @cancel="actionShow = false">
      <view class="action">
        <view class="action-item" v-if="showMore"
          ><view
            class="icon"
            hover-class="icon-hover"
            :hover-stay-time="150"
            @click="collect"
            ><tui-icon
              :name="isCollected ? 'star-fill' : 'star'"
              :size="26"
              :color="isCollected ? '#ffd214' : '#444'"
            ></tui-icon></view
          ><view class="title">收藏</view></view
        >
        <view class="action-item" v-if="showMore"
          ><view
            class="icon"
            hover-class="icon-hover"
            :hover-stay-time="150"
            @click="report"
            ><tui-icon name="about" :size="29" color="#444"></tui-icon></view
          ><view class="title">举报</view></view
        >
        <view class="action-item"
          ><view
            class="icon"
            hover-class="icon-hover"
            :hover-stay-time="150"
            @click="shareArticle"
            ><view class="iconfont icon-forward" /></view
          ><view class="title">分享</view></view
        >
        <view class="action-item"
          ><view
            class="icon"
            hover-class="icon-hover"
            :hover-stay-time="150"
            @click="copyLink"
            ><view class="iconfont icon-link" /></view
          ><view class="title">复制链接</view></view
        >
      </view>
    </tui-actionsheet>
  </view>
</template>

<script>
import { data } from "./data";
export default {
  components: {},
  data() {
    return {
      showAuthor: false,
      author: "人民日报",
      avatar: "",
      time: "2022-02-06 15:25",
      isFollowed: false,
      followLoading: false,
      html: data,
      isCollected: false,
      isLiked: false,
      actionShow: false,
      showMore: false,
      commentShow: false,
      replyPlaceholder: "",
      commentContent: "",
      comments: [
        {
          username: "Exrick",
          desc: "官方账号",
          avatar: "/static/avatar2.png",
          content: "太棒了，加油！",
          time: "3小时前",
          replyCount: 3,
          like: 528,
          isLiked: false,
        },
        {
          username: "XBoot",
          avatar: "/static/avatar.png",
          content: "好样的！",
          time: "1小时前",
          replyCount: 0,
          like: 68,
          isLiked: false,
        },
      ],
    };
  },
  onPageScroll(e) {
    let scrollTop = e.scrollTop;
    if (scrollTop > 100) {
      this.showAuthor = true;
    } else {
      this.showAuthor = false;
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toSearch() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    follow() {
      this.followLoading = true;
      setTimeout(() => {
        this.followLoading = false;
        this.isFollowed = !this.isFollowed;
      }, 1000);
    },
    replyComment(v) {
      this.replyPlaceholder = "回复 " + v.username + "：";
      this.commentShow = true;
    },
    comment() {
      this.replyPlaceholder = "";
      this.commentShow = true;
    },
    toComment() {
      let scrollTop = 0;
      let view = uni.createSelectorQuery().select(".article-header");
      view
        .boundingClientRect((data) => {
          scrollTop += data.height;
        })
        .exec();
      view = uni.createSelectorQuery().select(".article-content");
      view
        .boundingClientRect((data) => {
          scrollTop += data.height;
        })
        .exec();
      console.log(scrollTop)
      if (scrollTop == 0) {
        scrollTop = 9999;
      }
      uni.pageScrollTo({
        scrollTop: scrollTop,
        // selector: ".comment-content",
        fail: (e) => {
          console.log(e);
        },
      });
    },
    likeComment(v) {
      if (v.isLiked) {
        v.like -= 1;
      } else {
        v.like += 1;
      }
      v.isLiked = !v.isLiked;
    },
    collect() {
      this.isCollected = !this.isCollected;
      if (this.actionShow) {
        this.actionShow = false;
      }
      if (this.isCollected) {
        this.msg("收藏成功");
      } else {
        this.msg("取消收藏成功");
      }
    },
    like() {
      this.isLiked = !this.isLiked;
    },
    share() {
      this.showMore = false;
      this.actionShow = true;
    },
    send() {
      this.msg("发表评论成功");
      this.commentShow = false;
    },
    choosePic() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          console.log(JSON.stringify(res.tempFilePaths));
        },
      });
    },
    more() {
      this.showMore = true;
      this.actionShow = true;
    },
    report() {
      this.msg("举报成功");
      this.actionShow = false;
    },
    shareArticle() {
      uni.shareWithSystem({
        summary: "第二十四届冬季奥林匹克运动会在北京隆重开幕",
        href: "https://uniapp.dcloud.io",
        success() {
          // 分享完成，请注意此时不一定是成功分享
        },
        fail() {
          // 分享失败
        },
      });
      this.actionShow = false;
    },
    copyLink() {
      uni.setClipboardData({
        data: "设置剪切板内容：https://uniapp.dcloud.io",
        success: () => {
          this.msg("复制链接成功");
        },
      });
      this.actionShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./article.scss";
</style>
